<template>
    <div>
        <div class="no-data" v-show="pieChartData.length===0">暂无数据</div>
        <div id="pieChart1" ref="barChart" class="pie-chart" v-show="pieChartData.length>0"></div>
    </div>
</template>

<script>
    var option={
        title: {
            text: '电器数统计',
            left: '2%',
            top: '5%',
            textStyle: {
                color: '#fff',
                fontSize: '0.32rem',
            },
        },
        
        color: [ '#44c8f4','#8fddf7','#23cba7','#ffd570', '#7f95fa','#3afac1','#1a7dd0',],
        // label: {
        //     formatter: "{b} : {c} ({d}%)"
        // },
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
        series : [
            {
                type: 'pie',
                radius: '60%',
                data:[
                ],
                // roseType: 'angle',
                itemStyle: {
                    normal: {
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    let myChart = null
    import * as echarts from 'echarts';
    export default {
        name: "index",
        props:{
            pieChartData: Array
        },
        mounted() {
            myChart = echarts.init(document.getElementById('pieChart1'));
            myChart.setOption(option);
        },
        methods: {
            // 对数据进行处理
            dealData() {
                myChart.clear()
                let Arr = []
                this.pieChartData.forEach((item,index)=>{
                    if(item.name!=='主机'){
                        Arr[index]={}
                        Arr[index].value = item.count
                        Arr[index].name = item.name
                    }
                })
                option.series[0].data = Arr
                myChart.setOption(option, true);
            },
        },
        watch: {
            pieChartData() {
                this.dealData()
            }
        }
    }
</script>

<style scoped lang="stylus">
    .pie-chart
        width 3.59rem      
        margin 0 auto
        height 3.25rem;
    .no-data
        text-align center
        height 3.25rem
        line-height 3.52rem
</style>